+function ($) {
  $(document).ready(function(){
    var TILE_IDS = [
      1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 
      16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30
    ];
    var rows;
    var rows_lg = [
      " A A B . . . ",
      " A A B . . C ",
      " . . E E D C "
    ];
    var rows_sm = [
      " A A B . ",
      " A A B . ",
      " . C C . ",
      " D D . E ",
      " . F F E "
    ];
    var rows_xs = [
      " A A B ",
      " A A B ",
      " . . . ",
      " . . C ",
      " . . C ",
      " D D . "
    ];

    var el = $('#masonry'),
    grid = new Tiles.Grid(el);
    grid.cellPadding = 0;
    grid.animationDuration = 0;

    grid.resizeColumns = function() {
        return this.template.numCols;
    };
    grid.numCols = function() {
        return this.template.numRows;
    };

    grid.createTile = function(tileId) {
        var tile = new Tiles.Tile(tileId);
        tile.$el.attr('tile-id', tileId).addClass('pos-abt').append($( " > .item:first", el ));
        return tile;
    };

    // get the rows json for different screen
    var $window = $(window);
    var getRows = function(){
      var $rows;
      $window.width() <  768 && ($rows = rows_xs);
      $window.width() >= 768 && ($rows = rows_sm);
      $window.width() >= 992 && ($rows = rows_lg);
      return $rows;
    };

    grid.template = Tiles.Template.fromJSON(getRows());
    grid.isDirty = true;
    grid.resize();

    var ids = TILE_IDS.slice(0, grid.template.rects.length);
    grid.updateTiles(ids);
    grid.redraw(true);

    // set height on mobile
    var setHeight = function(){
     el.height(grid.cellSize * grid.template.numRows);
    }
    setHeight();

    // resize the window
    var $resize, $width = $window.width();
    $window.resize(function() {
      if($width !== $window.width()){
        clearTimeout($resize);
        $resize = setTimeout(function(){      
          grid.template = Tiles.Template.fromJSON(getRows());
          grid.resize();
          grid.redraw(true);
          setHeight();
          $width = $window.width();
        }, 200);
      }
    });

  });
}(jQuery);